<template>
  <div class="header">
    <div class="navigation">
      <span
        v-for="(item, index) in navigatLeft"
        :key="index"
        class="navigation-left marginAll"
        >{{ item }}</span
      >
      <span
        v-for="(item, index) in navigatRight"
        :key="index"
        @mouseenter="Show(index)"
        @mouseleave="Show(index)"
        class="navigation-rigth marginAll"
        >{{ item }}<show-box v-if="index == 1" v-show="show"></show-box
      ></span>
    </div>
    <search-tab></search-tab>
  </div>
</template>

<script>
import SearchTab from "./SearchTab.vue";
import ShowBox from "./ShowBox.vue";
export default {
  components: {
    SearchTab,
    ShowBox,
  },
  data() {
    return {
      show: false,
      navigatLeft: ["你好，XX", "首页"],
      navigatRight: ["我的订单", "购物车", "收藏夹", "商家入口"],
    };
  },
  methods: {
    Show(index) {
      if (index == 1) this.show = !this.show;
    },
  },
};
</script>

<style>
.header{
    box-shadow: 0 1px 10px rgb(206, 206, 206);
}
.navigation {
  height: 35px;
  background-color: rgb(255, 230, 230);
}
.navigation-left {
  float: left;
}
.navigation-rigth {
  float: right;
}
.navigation span {
  cursor: pointer;
  display: inline-block;
  width: 80px;
  line-height: 40px;
}
.navigation span:hover{
  background: white;
  border-top: 2px solid rgb(255, 230, 230);
}
.marginAll {
  margin-left: 10px;
  margin-right: 10px;
}
</style>